<template>
  <div id='updatePush'>
    <div class="body">
      <div class="card-container">
        <el-row :gutter="10">
          <el-form ref="form" :model="form" label-position="left" :rules="rules" label-width="120px">
            <el-col :span="24" :offset="0">
              <el-form-item label="资料编码:" prop="dataCode">
                <span>{{ form.dataCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24" :offset="0">
              <el-form-item label="资料描述:" prop="dataDesc">
                <span>{{ form.dataDesc }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="视频:" prop="videoSourceName">
                <span>{{ form.videoSourceName || "无" }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="图片:" prop="pictureSourceName">
                <span>{{ form.pictureSourceName || "无" }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="通知:" prop="noticeSourceName">
                <span>{{ form.noticeSourceName || '无' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="通知展示时长:" prop="noticeDisplayDuration">
                <span>{{ form.noticeDisplayDuration }}分钟</span>
              </el-form-item>
            </el-col>
            <el-col :span="24" :offset="0">
              <el-form-item label="滚动消息:" prop="scrollMessage">
                <span>{{ form.scrollMessage || '无' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="滚动消息展示时长:" label-width="140px" prop="scrollMessageDisplayDuration">
                <span>{{ form.scrollMessageDisplayDuration }}分钟</span>
              </el-form-item>
            </el-col>
            <el-col :span="24" :offset="0" v-if="name !== '详情'">
              <div class="terr-title">
                选择推送设备
              </div>
              <div class="treeBox">
                <!-- :defaultProps="{label:'shortName',id: 'projectId',children: 'deviceList'}"
                :pid="'parentProjectId'" -->
                <tree-transfer :title="title" filter :from_data='fromData' :to_data='toData'
                  :defaultProps="{ children: 'deviceList' }" :mode="'transfer'" height='450px' openAll>
                </tree-transfer>
                <!-- <el-tree ref="menu" :data="fromData" default-expand-all show-checkbox :props="{ children: 'deviceList' }">
                </el-tree> -->
              </div>
            </el-col>
          </el-form>
        </el-row>
      </div>

    </div>

    <div class="footer">
      <el-button @click="submitForm" >推 送</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { getPush, clickPush } from '@/api/dm/dm';
import { getProject } from '@/api/common.js';
import treeTransfer from 'el-tree-transfer';
export default {
  name: 'updatePush',
  props: {
    row: {
      type: Object,
      default: () => {
        return {};
      },
    },
    name: {
      type: String,
      default: '',
    },
  },
  components: { treeTransfer },
  data() {
    return {
      title: ['待选', '已选'],
      form: {},
      rules: {},
      fromData: [],
      fromData1: [
        {
          id: '5',
          pid: 0,
          label: '1',
          children: [
            {
              id: '118',
              pid: '5',
              label: '二级 1-1',
              children: [],
            },
            {
              id: '119',
              pid: '5',
              label: '二级 1-2',
              children: [
                {
                  id: '1-2-1',
                  pid: '119',
                  children: [],
                  label: '二级 1-2-1',
                },
                {
                  id: '1-2-2',
                  pid: '119',
                  children: [],
                  label: '二级 1-2-2',
                },
              ],
            },
          ],
        },
        {
          id: '2',
          pid: 0,
          label: '2',
          children: [
            {
              id: '2-1',
              pid: '2',
              label: '二级 2-1',
              // disabled: true,
              children: [
                {
                  id: '2-2-1',
                  pid: '2-1',
                  children: [],
                  label: '二级 2-2-1',
                },
              ],
            },
            {
              id: '2-2',
              pid: '2',
              label: '二级 2-2',
              // disabled: true,
              children: [],
            },
          ],
        },
      ],
      toData: [],
    };
  },
  computed: {},
  created() {
    // if (process.client){}
  },
  mounted() {
    this.getData();
    this.getProjectData();
  },
  beforeCreate() { },
  beforeMount() { },
  methods: {
    async getData() {
      const res = await getPush(this.row.dataManageId);
      if (res.code == 200) {
        this.form = res.data;
      }
    },
    async getProjectData() {
      const res = await getProject();
      if (res.code == 200) {
        this.fromData = res.data;
      }
    },
    async submitForm() {
     
      const res = await clickPush({ dataManageId: this.form.dataManageId });
      if (res.code == 200) {
        this.$emit(
          'push',
          {
            dataManageId: this.form.dataManageId,
            dataId: res.data,
          },
          this.toData
          
        );
      }
      this.$emit('cancel');
    },
    cancel() {
      this.$emit('cancel');
    },
  },
};
</script>
<style lang='scss' scoped>
#updatePush {
  width: 100%;
  height: 100%;
}

.body {
  width: 100%;
  height: 700px;
  overflow: hidden;
  overflow-y: auto;
  padding: 0 10px;
}

.terr-title {
  height: 50px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: bold;
  line-height: 50px;
  color: #fff;
  background: rgba(144, 147, 153, 0.2);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.treeBox {
  border: 1px solid rgba(144, 147, 153, 0.2);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  // padding: 0px 20px 20px 20px;
  padding: 20px;
}

.body::-webkit-scrollbar {
  width: 8px;
  /*height: 4px;*/
}

.body::-webkit-scrollbar-thumb {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 5px rgba(217, 217, 217, 1);
  background: rgba(0, 0, 0, 0.2);
}

.body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(240, 240, 240, 1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.1);
}

.footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

::v-deep .transfer-title {
  color: #fff !important;
  background: rgba(0, 0, 0, 0.24) !important;
}

span {
  color: rgba(255, 255, 255, .6);
}</style>